<template>
  <div class="container" v-touch:left.stop="back">
    <!-- 搜索框 -->
    <van-search v-model="value" placeholder="想找什么,请输入" show-action fixed> </van-search>
    <!-- 标签栏 -->
    <van-tabs v-model="active" swipeable title-active-color="#ee0a24">
      <van-tab title="菜谱" />
      <van-tab title="食材" />
      <van-tab title="笔记" />
      <van-tab title="专题" />
      <van-tab title="菜单" />
      <van-tab title="会员" />
    </van-tabs>
    <!-- 标签 -->
    <div class="tag">
      <van-tag style="margin: 5px" size="large" color="#f0f0f4" text-color="#333">红烧肉</van-tag>
      <van-tag style="margin: 5px" size="large" color="#f0f0f4" text-color="#333">可乐鸡翅</van-tag>
      <van-tag style="margin: 5px" size="large" color="#f0f0f4" text-color="#333">糖醋排骨</van-tag>
      <van-tag style="margin: 5px" size="large" color="#f0f0f4" text-color="#333">红烧排骨</van-tag>
      <van-tag style="margin: 5px" size="large" color="#f0f0f4" text-color="#333">小龙虾</van-tag>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      active: 0,
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
}
.tag {
  margin: 20px;
}
</style>
